<template>
  <div>
    <div class="header">
      <!-- nav-bar -->
      <van-nav-bar title="甜品饮品" left-arrow> </van-nav-bar>
      <!-- 下拉菜单 -->

      <van-dropdown-menu>
        <van-dropdown-item
          v-model="value1"
          :icon="baseurl + icon"
          :options="option1"
        />
        <!-- 排序 -->
        <van-dropdown-item v-model="value2" :options="option2" />
        <!-- 筛选 -->
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="list">
        <img
          src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg"
          alt
        />

        <div class="right">
          <span class="brand">品牌</span><span class="shop">效果演示</span>
          <span>保准票</span><br />

          <p class="star_center">
            <van-rate v-model="star" color="#ffd21e" :count="5" :size="18" />{{
              star
            }}
            <span>月售106单</span> <span class="bird">蜂鸟专送</span>
            <span>准时达</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入商品列表接口
import { goods, shop } from "../api/goods";
import axios from "../utils/req";
export default {
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
      star: 4.3, //星星评价
      goodlist: [],
      option1: [{ text: "分类", value: 0 }],
      option2: [{ text: "排序", value: 0 }],
      option3: [{ text: "筛选", value: 0 }],
      icon: "",
      baseurl: axios.defaults.baseURL,
    };
  },
  created() {
    goods().then((res) => {
      console.log(35, res);
      this.goodlist = res.data;

      for (let i = 0; i < this.goodlist.length; i++) {
        this.option1.push({
          text: this.goodlist[i].name,
          value: i,
          icon: this.baseurl + this.goodlist[i].image_url,
        });
        console.log(40, this.goodlist[i].image_url);
        console.log(41, this.baseurl + this.goodlist[i].image_url);
      }
    });
    shop({
      longitude: "121.4762",
      latitude: "31.22967",
    }).then((res) => {
      console.log(68, res);
    });
  },
};
</script>

<style lang="less" scoped>
.header > .van-nav-bar {
  background-color: rgb(49, 144, 232);
}
/deep/.van-icon {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
  font-weight: 700;
}
// 内容部分

.list {
  background-color: #eee;
  display: flex;
  .left,
  .right {
    flex: 1;
  }
}
&img {
  margin: 10px;
  width: (60 / 360) * 100vw;
  height: (60 / 360) * 100vw;
}
.brand {
  background-color: yellow;
  margin-right: 5px;
}
.shop {
  font-size: 26px;
  font-weight: 700;
  margin-right: 130px;
}
.star_center {
  font-size: 12px;
}
.bird {
  margin-left: 40px;
}
</style>